<!doctype html>
<html lang="en">

<head>
    <script src="jquery-3.4.1.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="vue.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css"></link>
    <link rel="stylesheet" href="FlowChart.css"></link>
    <title>设计流程</title>

</head>

<body>
    <div id="tip" class="alert alert-success alert-dismissible fade show" style="position: fixed; width:100%;display: none;">
        <button type="button" class="close" data-dismiss="alert">&times;</button> 提示：保存成功!
    </div>
    <div id="tip2" class="alert alert-danger alert-dismissible fade show" style="position: fixed; width:100%;display: none;">
        <button type="button" class="close" data-dismiss="alert">&times;</button> 提示：保存失败，如果有多个自定义操作，则他们的选项名称必须设置成不同名称!
    </div>
    <div id="navigator">
        <nav aria-label="breadcrumb" v-if="type==1">
            <ol class="breadcrumb" style="padding-left:23px;padding-bottom: 0;margin-bottom:0;background-color: white">
                <li @click="gotoHome" class="breadcrumb-item"><a href="#">{{"Home~首页" | lang}}</a></li>
                <li @click="gotoInfo" aria-current="page" class="breadcrumb-item" style="color: black"><a href="#">{{"Task Information~任务信息" | lang}}</a></li>
                <li aria-current="page" class="breadcrumb-item active" style="color: black">{{"Task Modification~任务流程修改"
                    | lang}}
                </li>
            </ol>
        </nav>
    </div>
    <div style="display:flex">
        <div style="width: 200px;float:left;overflow: auto">
            <div class="toolbox" style="text-align:center;margin: 20px;border-radius:10px;border:navy solid;background-color:rgb(242,243,245);z-index: 9999;">
                <div style="padding: 10px;border-radius:10px;font-size: 20px;">工具箱</div>
                <button type="button" id="save" data-toggle="modal" data-target="#myModal" onmousedown="$('#myModal').modal('show');" class="btn btn-primary">保存任务</button>
                 <button type="button" data=1 class="btn btn-outline-primary options">打开网页</button>
                <button type="button" data=2 class="btn btn-outline-primary options">点击元素</button>
                <button type="button" data=3 class="btn btn-outline-primary options">提取数据</button>
                <button type="button" data=4 class="btn btn-outline-primary options">输入文字</button>
                <button type="button" data=5 class="btn btn-outline-primary options" style="font-weight: bold">自定义操作</button>
                <button type="button" data=6 style="font-size: 14px!important;" class="btn btn-outline-primary options">切换下拉选项</button>
                <button type="button" data=7 class="btn btn-outline-primary options">移动到元素</button>
                <button type="button" data=8 class="btn btn-outline-primary options" style="font-weight: bold">循环</button>
                <button type="button" data=9 class="btn btn-outline-primary options" style="font-weight: bold">判断条件</button>
                <div>-----------------</div>
                <button type="button" data=13 class="btn btn-outline-primary options" title="调整下一个要插入的节点的位置">调整锚点</button>
                <button type="button" data=10 class="btn btn-outline-primary options">剪切元素</button>
                <button type="button" data=11 class="btn btn-outline-primary options">复制元素</button>
                <button type="button" data=12 class="btn btn-outline-primary options">删除元素</button>
                <button type="button" data=0 class="btn btn-outline-primary2 options">取消操作</button>
                <div style="text-align: left;margin: 10px;font-size:15px!important">提示：点击上方操作按钮后点击要放置元素的位置处的箭头，可按取消操作按钮取消。</div>
            </div>
        </div>
        <div style="margin-top:20px;border: solid;height:850px;overflow: auto;width:58%;float:right">
            <div id="0" class="clk" data="0">
            </div>
            <div style="border-radius: 50%;width: 40px;height: 40px;border:solid black;margin: 5px auto;background-color:lightcyan">
                <p style="font-size: 22px!important;text-align: center;margin-left: 1px;">■</p>
            </div>
        </div>
        <div style="margin-top:20px;border: solid navy;height:850px;overflow: auto;margin-left:10px;margin-right:10px;width:30%;float:right;min-width:300px">
            <!-- <div style="display: inline-block;border-bottom:solid 2px;width:100%">
                <input style="float:left;margin-left:10px;margin-top:10px;margin-bottom:10px" type="button" class="btn-primary" value="保存任务"></input>
            </div> -->
            <div class="Modify" id="app">
                <div class="modal fade" id="myModal_XPath" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">等价XPath</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            </div>
                            <div class="modal-body">
                                <label>以下提供除默认生成的XPath外其余等价的XPath，都能定位到同一个元素（但不完全准确，可能可以定位到除该元素外的其他元素，因此只是提供在这里作为参考）。 </label>
                                <label>每行一个XPath（可使用预装的XPath Helper扩展调试）：</label>
                                <textarea id="otherXPaths" onkeydown="inputDelete(event)" class="form-control" rows="4">{{XPaths}}</textarea>
                                <div>
                                    <img src="../img/XPather_helper.png" style="width:50%;height:50%; margin: 10px auto"></div>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal -->
                </div>

                <div>
                    <label>选项名称（鼠标移到笑脸可查看提示）<span style="font-size: 30px!important;" title="修改名称后点击下方“确定”按钮刷新流程图">☺</span>：</label>
                    <input onkeydown="inputDelete(event)" class="form-control" v-model='list.nl[index.nowNodeIndex]["title"]'></input>
                </div>
                <!-- 下面是10种不同类型操作选项的不同的配置页面 -->
                <div class="elements" v-if="nodeType==1">
                    <div v-if="nowNode['isInLoop']">
                        <!-- 如果在循环内且循环内是固定文本才显示此行元素 -->
                        <p><input onkeydown="inputDelete(event)" type="checkbox" v-model='useLoop'></input>使用循环内的链接</p>
                    </div>
                    <div v-if='!useLoop'>
<!--                        <label>url:</label>-->
<!--                        <input onkeydown="inputDelete(event)" class="form-control" v-model='nowNode["parameters"]["url"]'></input>-->
                        <label>链接池（每行一个链接，有多少行链接整个任务流程就会被执行多少次）：</label>
                        <textarea onkeydown="inputDelete(event)" class="form-control" rows="2" v-model='nowNode["parameters"]["links"]'></textarea>
                    </div>
                    <label>页面加载最长等待时间（秒）：</label>
                    <input onkeydown="inputDelete(event)" class="form-control" v-model.number="nowNode['parameters']['maxWaitTime']" type="number" required></input>
                    <label>打开网页后是否向下滚动：</label>
                    <select v-model='nowNode["parameters"]["scrollType"]' class="form-control">
                        <option value = 0>不滚动</option>
                        <option value = 1>向下滚动一屏</option>
                        <option value = 2>滚动到底部</option>
                      </select>
                    <label>滚动次数（滚动类型设置为<b>不滚动</b>时<b>无效</b>）：</label>
                    <input onkeydown="inputDelete(event)" class="form-control" v-model.number="nowNode['parameters']['scrollCount']" type="number" required></input>
                    <label>滚动后等待时间（秒）：</label>
                    <input onkeydown="inputDelete(event)" class="form-control" v-model.number="nowNode['parameters']['scrollWaitTime']" type="number" required></input>
                </div>

                <div class="elements" v-if="nodeType==2">
                    <div v-if="nowNode['isInLoop']">
                        <!-- 如果在循环内才显示此行元素 -->
                        <p><input onkeydown="inputDelete(event)" type="checkbox" v-model='useLoop'></input>使用循环内的元素</p>
                    </div>
                    <div v-if='!useLoop'>
                        <label>XPath： <span style="font-size: 30px!important;" title="相对XPATH写法:以/开头，如循环项XPATH为/html/body/div[1],您的输入为/*[@id='tab-customer'],则最终寻址的xpath为：/html/body/div[1]/*[@id='tab-customer']">☺</span></label>
                        <textarea onkeydown="inputDelete(event)" class="form-control" rows="2" v-model='nowNode["parameters"]["xpath"]'></textarea>
                        <p><button type="button" data-toggle="modal" data-target="#myModal_XPath" @click="changeXPaths(nowNode['parameters']['allXPaths'])" class="btn btn-primary" style="margin-top: 10px">点此查看其他等价的XPath</button></p>
                    </div>
                    <label>点击后页面加载最长等待时间（秒）：</label>
                    <input onkeydown="inputDelete(event)" class="form-control" v-model.number="nowNode['parameters']['maxWaitTime']" type="number" required></input>
                    <label>点击后是否向下滚动页面：</label>
                    <select v-model='nowNode["parameters"]["scrollType"]' class="form-control">
                        <option value = 0>不滚动</option>
                        <option value = 1>向下滚动一屏</option>
                        <option value = 2>滚动到底部</option>
                      </select>
                    <label>滚动次数（滚动类型设置为<b>不滚动</b>时<b>无效</b>）：</label>
                    <input onkeydown="inputDelete(event)" class="form-control" v-model.number="nowNode['parameters']['scrollCount']" type="number" required></input>
                    <label>滚动后等待时间（秒）：</label>
                    <input onkeydown="inputDelete(event)" class="form-control" v-model.number="nowNode['parameters']['scrollWaitTime']" type="number" required></input>
                    <p style="margin-top: 10px">
                        <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                            点此展开/折叠高级操作
                        </a>
                    </p>
                    <div :class="{collapse: true, 'show': nowNode['parameters']['beforeJS'].length!=0 || nowNode['parameters']['afterJS'].length!=0}" id="collapseExample">
                        <div>
                            <label>点击该元素<strong>前</strong>针对该元素执行一段JavaScript脚本： </label>
                            <textarea onkeydown="inputDelete(event)" class="form-control" rows="2"
                                      placeholder='该元素用arguments[0]来表示，示例JS代码：arguments[0].innerText = arguments[0].innerText.replace("上海","Shanghai")即实现了将元素文字中的“上海”替换成”Shanghai“的功能，然后后续如提取数据时就会提取到替换后的值。' v-model='nowNode["parameters"]["beforeJS"]'></textarea>
                            <label>最长等待脚本执行时间（0代表无限等待）： </label>
                            <input onkeydown="inputDelete(event)" required class="form-control" type="number" v-model.number='nowNode["parameters"]["beforeJSWaitTime"]'></input>
                            <label>点击该元素<strong>后</strong>针对该元素执行一段JavaScript脚本： </label>
                            <textarea onkeydown="inputDelete(event)" class="form-control" rows="2" placeholder='该元素用arguments[0]来表示，示例JS代码：arguments[0].click()即点击此元素' v-model='nowNode["parameters"]["afterJS"]'></textarea>
                            <label>最长等待脚本执行时间（0代表无限等待）： </label>
                            <input onkeydown="inputDelete(event)" required class="form-control" type="number" v-model.number='nowNode["parameters"]["afterJSWaitTime"]'></input>
                        </div>
                    </div>



                </div>

                <div class="elements" v-if="nodeType==3">
                    <p>
                        <button class="btn btn-primary" v-on:mousedown= 'addPara'>新增字段</button>
                    </p>
                    <div class="toolkitcontain">
                        <table class="toolkittb2" cellspacing="0">
                            <tbody>
                                <th>字段名</th>
                                <th style="width:200px">示例值</th>
                                <th>操作</th>
                            </tbody>
                        </table>
                        <table class="toolkittb4" cellspacing="0">
                            <tbody>
                                <tr v-for="i in paras.parameters.length">
                                    <td style="padding-left:0px"><input onkeydown="inputDelete(event)" style='padding-left:2px;font-size:13px!important;height:100%' v-model='paras.parameters[i-1]["name"]'></input>
                                    </td>
                                    <td style="width:200px">{{paras.parameters[i-1]["exampleValues"][0]["value"]}}</td>
                                    <td>
                                        <a v-on:mousedown="modifyParas(i-1)">修改</a>
                                        <a v-on:mousedown="deleteParas(i-1)">删除</a>
                                        <a v-on:mousedown="upParas(i-1)">上移</a>
                                        <a v-on:mousedown="downParas(i-1)">下移</a>
                                    </td>
                                </tr>
                        </table>
                    </div>
                    <div style="font-size: 13px;" v-if="paraIndex<paras.parameters.length">
                        <p>当前编辑字段参数名（点击字段的“修改”选项切换参数）： </p>
                        <label><strong>{{paras.parameters[paraIndex]["name"]}}</strong></label>
                        <p v-if="nowNode['isInLoop']"><input onkeydown="inputDelete(event)" type="checkbox" v-model='paras.parameters[paraIndex]["relative"]'></input>使用相对循环内的XPATH</p>
                        <p>XPath： <span style="font-size: 30px!important;" title="相对XPATH写法:以/开头，如循环项XPATH为/html/body/div[1],您的输入为/*[@id='tab-customer'],则最终寻址的xpath为：/html/body/div[1]/*[@id='tab-customer']">☺</span></p>
                        <textarea onkeydown="inputDelete(event)" class="form-control" rows="2" v-model='paras.parameters[paraIndex]["relativeXPath"]'></textarea>
                        <p><button type="button" data-toggle="modal" data-target="#myModal_XPath" @click="changeXPaths(paras.parameters[paraIndex]['allXPaths'])" class="btn btn-primary" style="margin-top: 10px">点此查看其他等价的XPath</button></p>
                        <p style="margin-top: 10px">
                            <a class="btn btn-primary" data-toggle="collapse" href="#elementAdvanced" role="button" aria-expanded="false" aria-controls="collapseExample">
                                点此展开/折叠高级操作
                            </a>
                        </p>
                        <div :class="{collapse: true, 'show': paras.parameters[paraIndex]['beforeJS'].length!=0 || paras.parameters[paraIndex]['afterJS'].length!=0}" id="elementAdvanced">
                            <div>
                                <label>提取该元素数据<strong>前</strong>针对该元素执行一段JavaScript脚本： </label>
                                <textarea onkeydown="inputDelete(event)" class="form-control" rows="2"
                                          placeholder='该元素用arguments[0]来表示，示例JS代码：arguments[0].innerText = arguments[0].innerText.replace("上海","Shanghai")即实现了将元素文字中的“上海”替换成”Shanghai“的功能，然后后续如提取数据时就会提取到替换后的值。' v-model='paras.parameters[paraIndex]["beforeJS"]'></textarea>
                                <label>最长等待脚本执行时间（0代表无限等待）： </label>
                                <input onkeydown="inputDelete(event)" required class="form-control" type="number" v-model.number='paras.parameters[paraIndex]["beforeJSWaitTime"]'></input>
                                <label>提取该元素数据<strong>后</strong>针对该元素执行一段JavaScript脚本： </label>
                                <textarea onkeydown="inputDelete(event)" class="form-control" rows="2" placeholder='该元素用arguments[0]来表示，示例JS代码：arguments[0].click()即点击此元素' v-model='paras.parameters[paraIndex]["afterJS"]'></textarea>
                                <label>最长等待脚本执行时间（0代表无限等待）： </label>
                                <input onkeydown="inputDelete(event)" required class="form-control" type="number" v-model.number='paras.parameters[paraIndex]["afterJSWaitTime"]'></input>
                            </div>
                        </div>
                        <label>采集内容类型</label>
                        <select v-model='paras.parameters[paraIndex]["contentType"]' class="form-control">
                            <option :value = 0>文本（包括子元素）</option>
                            <option :value = 1>文本（不包括子元素）</option>
                            <option :value = 2>innerHTML</option>
                            <option :value = 3>outerHTML</option>
                            <option :value = 4>背景图片地址</option>
                            <option :value = 5>页面网址</option>
                            <option :value = 6>页面标题</option>
                            <option :value = 7>元素截图</option>
                            <option :value = 8>OCR识别文字</option>
                            <option :value = 9>针对该元素的JavaScript代码返回值（需以return 开头）</option>
                            <option :value = 10>当前选择框选中的选项值</option>
                            <option :value = 11>当前选择框选中的选项文本</option>
                        </select>
                        <div v-if='paras.parameters[paraIndex]["contentType"] == 9'>
                            <label>JavaScript代码：</label>
                            <textarea onkeydown="inputDelete(event)" class="form-control" rows="2"
                                      placeholder='该元素用arguments[0]来表示，示例：return arguments[0].innerText + "美元"，即实现了提取该元素innerText并后面加“美元”的功能。' v-model='paras.parameters[paraIndex]["JS"]'></textarea>
                            <label>最长等待脚本执行时间（0代表无限等待）： </label>
                            <input onkeydown="inputDelete(event)" required class="form-control" type="number" v-model.number='paras.parameters[paraIndex]["JSWaitTime"]'></input>
                        </div>
                        <label>节点类型</label>
                        <select v-model='paras.parameters[paraIndex]["nodeType"]' class="form-control">
                            <option :value = 0>普通节点</option>
                            <option :value = 1>链接文本</option>
                            <option :value = 2>链接地址</option>
                            <option :value = 3>表单值</option>
                            <option :value = 4>图片地址</option>
                        </select>
                        <div v-if='paras.parameters[paraIndex]["nodeType"] == 4'>
                            <label>提取图片地址后是否同时<b>下载图片</b>：</label>
                            <select v-model='paras.parameters[paraIndex]["downloadPic"]' class="form-control">
                                <option :value = 0>否</option>
                                <option :value = 1>是</option>
                            </select>
                        </div>
<!--                        <label>提取方式</label>-->
<!--                        <select v-model='paras.parameters[paraIndex]["extractType"]' class="form-control">-->
<!--                            <option :value = 0>普通提取</option>-->
<!--                            <option :value = 1>OCR提取</option>-->
<!--                        </select>-->
                        <label>参数描述：</label>
                        <textarea onkeydown="inputDelete(event)" class="form-control" style="min-height: 60px" v-model='paras.parameters[paraIndex]["desc"]'></textarea>
                        <label>元素找不到时的值：</label>
                        <input onkeydown="inputDelete(event)" class="form-control" v-model='paras.parameters[paraIndex]["default"]'></textarea>

                    </div>

                </div>


                <div class="elements" v-if="nodeType==4">
                    <div v-if="nowNode['isInLoop']">
                        <!-- 如果在循环内且循环内是固定文本才显示此行元素 -->
                        <p><input onkeydown="inputDelete(event)" type="checkbox" v-model='useLoop'></input>使用循环内的文本（不勾选则每次输入的文本为下方“输入值”文本框内的文本，勾选后会使用所在循环内设置的文本）</p>
                    </div>
                    <div v-if='!useLoop'>
                        <label>输入值（用Field["字段名"]来输入某字段最后一次提取到的值）：</label>
                        <input onkeydown="inputDelete(event)" class="form-control" v-model='nowNode["parameters"]["value"]'></input>
                    </div>

                    <label>XPath： <span style="font-size: 30px!important;" title="相对XPATH写法：以/开头，如循环项XPATH为/html/body/div[1],您的输入为/*[@id='tab-customer'],则最终寻址的xpath为：/html/body/div[1]/*[@id='tab-customer']">☺</span></label>
                    <textarea onkeydown="inputDelete(event)" class="form-control" rows="2" v-model='nowNode["parameters"]["xpath"]'></textarea>
                    <p><button type="button" data-toggle="modal" data-target="#myModal_XPath" @click="changeXPaths(nowNode.parameters['allXPaths'])" class="btn btn-primary" style="margin-top: 10px">点此查看其他等价的XPath</button></p>
                    <p style="margin-top: 10px">
                        <a class="btn btn-primary" data-toggle="collapse" href="#inputAdvanced" role="button" aria-expanded="false" aria-controls="collapseExample">
                            点此展开/折叠高级操作
                        </a>
                    </p>
                    <div :class="{collapse: true, 'show': nowNode['parameters']['beforeJS'].length!=0 || nowNode['parameters']['afterJS'].length!=0}" id="inputAdvanced">
                        <div>
                            <label>对该元素输入文字<strong>前</strong>针对该元素执行一段JavaScript脚本： </label>
                            <textarea onkeydown="inputDelete(event)" class="form-control" rows="2"
                                      placeholder='该元素用arguments[0]来表示，示例JS代码：arguments[0].innerText = arguments[0].innerText.replace("上海","Shanghai")即实现了将元素文字中的“上海”替换成”Shanghai“的功能，然后后续如提取数据时就会提取到替换后的值。' v-model='nowNode["parameters"]["beforeJS"]'></textarea>
                            <label>最长等待脚本执行时间（0代表无限等待）： </label>
                            <input onkeydown="inputDelete(event)" required class="form-control" type="number" v-model.number='nowNode["parameters"]["beforeJSWaitTime"]'></input>
                            <label>对该元素输入文字<strong>后</strong>针对该元素执行一段JavaScript脚本： </label>
                            <textarea onkeydown="inputDelete(event)" class="form-control" rows="2" placeholder='该元素用arguments[0]来表示，示例JS代码：arguments[0].click()即点击此元素' v-model='nowNode["parameters"]["afterJS"]'></textarea>
                            <label>最长等待脚本执行时间（0代表无限等待）： </label>
                            <input onkeydown="inputDelete(event)" required class="form-control" type="number" v-model.number='nowNode["parameters"]["afterJSWaitTime"]'></input>
                        </div>
                    </div>
                </div>

                <div class="elements" v-if="nodeType==5">
                    <label>自定义执行模式</label>
                    <select v-model='nowNode["parameters"]["codeMode"]' class="form-control">
                        <option value = 0>执行一段JavaScript脚本</option>
                        <option value = 1>执行一段操作系统级别命令</option>
                        <option v-if="nowNode['isInLoop']" value = 2>针对当前循环项的JavaScript脚本</option>
                    </select>

                    <div>
                        <label>代码/脚本内容： </label>
                        <textarea onkeydown="inputDelete(event)" class="form-control" rows="2" v-model='nowNode["parameters"]["code"]' placeholder="输入JS或系统命令，如：document.body.innerText = '1' 或 python D:/test.py，分别为JS命令和系统命令示例。如选择针对当前循环项的JS脚本，则循环项元素用arguments[0]表示，如arguments[0].style.color = 'blue'"></textarea>
                        <p style="margin-top: 15px">是否将执行后的输出/返回值作为字段记录：</p>
                        <p><select v-model='nowNode["parameters"]["recordASField"]' class="form-control">
                            <option value = 0>否</option>
                            <option value = 1>是（JavaScript脚本需要以return 开头）</option>
                        </select></p>
                        <label>最长等待脚本执行时间（0代表无限等待）： </label>
                        <input onkeydown="inputDelete(event)" required class="form-control" type="number" v-model.number='nowNode["parameters"]["waitTime"]'></input>
                    </div>





                </div>

                <div class="elements" v-if="nodeType==6">
                    <label>XPath： </label>
                    <textarea onkeydown="inputDelete(event)" class="form-control" rows="2" v-model='nowNode["parameters"]["xpath"]'></textarea>
                    <p><button type="button" data-toggle="modal" data-target="#myModal_XPath" @click="changeXPaths(nowNode['parameters']['allXPaths'])" class="btn btn-primary" style="margin-top: 10px">点此查看其他等价的XPath</button></p>

                    <p>切换模式</p>

                    <select class="form-control" v-model='nowNode["parameters"]["optionMode"]'>
                        <option value=0>切换到下一个选项</option>
                        <option value=1>按索引值切换选项</option>
                        <option value=2>按选项值切换选项</option>
                        <option value=3>按选项文本切换选项</option>
                    </select>
                    <p>设定值（不适用于切换到下一个选项模式）</p>
                    <input class="form-control" id="selectValue" v-model='nowNode["parameters"]["optionValue"]' autoFocus="autofocus" type="text"></input>
                </div>

                <div class="elements" v-if="nodeType==7">
                    <div v-if="nowNode['isInLoop']">
                        <!-- 如果在循环内才显示此行元素 -->
                        <p><input onkeydown="inputDelete(event)" type="checkbox" v-model='useLoop'></input>使用循环内的元素</p>
                    </div>
                    <div v-if='!useLoop'>
                        <label>XPath： </label>
                        <textarea onkeydown="inputDelete(event)" class="form-control" rows="2" v-model='nowNode["parameters"]["xpath"]'></textarea>
                        <p><button type="button" data-toggle="modal" data-target="#myModal_XPath" @click="changeXPaths(nowNode['parameters']['allXPaths'])" class="btn btn-primary" style="margin-top: 10px">点此查看其他等价的XPath</button></p>
                    </div>


                </div>

                <div class="elements" v-if="nodeType==8">
                    <!-- 循环选项 -->
                    <label>循环类型：</label>
                    <select v-model='loopType' class="form-control">
                        <option value = 0>单个元素（多用于循环点击下一页）</option>
                        <option value = 1>不固定元素列表</option>
                        <option value = 2>固定元素列表</option>
                        <option value = 3>文本列表（多用于循环在文本框输入文本）</option>
                        <option value = 4>网址列表（多用于循环打开网页）</option>
                        <option value = 5>JavaScript命令返回值（需以return 开头）</option>
                        <option value = 6>系统命令返回值</option>
                      </select>
                    <div v-if='parseInt(loopType) < 2'>
                        <label>XPath： <span style="font-size: 30px!important;" title="相对XPATH写法：以/开头，如循环项XPATH为/html/body/div[1],您的输入为/*[@id='tab-customer'],则最终寻址的xpath为：/html/body/div[1]/*[@id='tab-customer']">☺</span></label>
                        <textarea onkeydown="inputDelete(event)" class="form-control" rows="2" v-model='nowNode["parameters"]["xpath"]'></textarea>
                        <p><button type="button" data-toggle="modal" data-target="#myModal_XPath" @click="changeXPaths(nowNode.parameters['allXPaths'])" class="btn btn-primary" style="margin-top: 10px">（测试功能）点此查看其他可能的XPath写法</button></p>
                    </div>
                    <div v-else-if='parseInt(loopType) == 2'>
                        <label>XPath列表：</label>
                        <textarea onkeydown="inputDelete(event)" class="form-control" rows="3" placeholder="每行一个XPath"  v-model='nowNode["parameters"]["pathList"]'></textarea>
                    </div>
                    <div v-else-if='parseInt(loopType) < 5'>
                        <label>内容列表（用Field["字段名"]来输入某字段最后一次提取到的值）：</label>
                        <textarea onkeydown="inputDelete(event)" class="form-control" rows="3" placeholder="每行一个文本/网址" v-model='nowNode["parameters"]["textList"]'></textarea>
                    </div>
                    <div v-else-if='parseInt(loopType) < 7'>
                        <label>代码/脚本内容： </label>
                        <textarea onkeydown="inputDelete(event)" class="form-control" rows="3" v-model='nowNode["parameters"]["code"]' placeholder="命令返回值大于0或为真则继续循环，否则停止循环。如：return document.body.scrollWidth > 1000 或 python D:/test.py，分别为JS命令和系统命令返回值示例。"></textarea>
                        <label>最长等待脚本执行时间（0代表无限等待）： </label>
                        <input onkeydown="inputDelete(event)" required class="form-control" type="number" v-model.number='nowNode["parameters"]["waitTime"]'></input>
                    </div>
                    <!-- 这里添加退出循环条件,找不到元素肯定退出循环 -->
                    <label v-if='parseInt(loopType) == 0'>最多执行循环次数（0代表无限循环直到找不到元素为止）：</label>
                    <input onkeydown="inputDelete(event)" required v-if='parseInt(loopType) == 0' class="form-control" type="number" v-model.number='nowNode["parameters"]["exitCount"]'></input>


                    <label><b>历史记录回退后</b>等待秒数：</label>
                    <input onkeydown="inputDelete(event)" required type="number" class="form-control" v-model.number='list.nl[index.nowNodeIndex]["parameters"]["historyWait"]'></input>
                    <label>执行完是否向下滚动：</label>
                    <select v-model='nowNode["parameters"]["scrollType"]' class="form-control">
                        <option value = 0>不滚动</option>
                        <option value = 1>向下滚动一屏</option>
                        <option value = 2>滚动到底部</option>
                    </select>
                    <label>滚动次数（滚动类型设置为<b>不滚动</b>时<b>无效</b>）：</label>
                    <input onkeydown="inputDelete(event)" class="form-control" v-model.number="nowNode['parameters']['scrollCount']" type="number" required></input>
                    <label>滚动后等待时间（秒）：</label>
                    <input onkeydown="inputDelete(event)" class="form-control" v-model.number="nowNode['parameters']['scrollWaitTime']" type="number" required></input>
                    <div id="breakAdvanced" v-if='nowNode["parameters"]["loopType"] < 5'>
                        <div>
                            <p><label>（高级操作）使用代码/脚本定义循环退出条件： </label></p>
                            <select v-model='nowNode["parameters"]["breakMode"]' class="form-control" style="font-weight: bold">
                                <option value = 0>不设置脚本（选择这个下面写了脚本也不会执行）</option>
                                <option value = 1>JavaScript脚本返回值（需以return 开头）</option>
                                <option value = 2>操作系统级别命令</option>
                            </select>
                            <div>
                                <textarea style="margin-top: 10px" onkeydown="inputDelete(event)" class="form-control" rows="2"
                                          placeholder='命令返回值小于等于0或为假时则直接退出循环，不管其他条件如何。如：return document.body.scrollWidth > 1000 或 python D:/test.py，分别为JS命令和系统命令返回值示例。' v-model='nowNode["parameters"]["breakCode"]'></textarea>
                                <label>最长等待脚本执行时间（0代表无限等待）：</label>
                                <input onkeydown="inputDelete(event)" required class="form-control" type="number" v-model.number='nowNode["parameters"]["breakCodeWaitTime"]'></input>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="elements" v-if="nodeType==9">
                    <label>判断条件是从左往右判断的，即如果最左边的条件分支的判断条件满足，则执行最左边分支内的操作，否则判断从左向右第二个分支的条件是否满足，依此类推。</label>
                </div>

                <div class="elements" v-if="nodeType==10">
                    <label>判断条件是从左往右判断的，即如果最左边的条件分支的判断条件满足，则执行最左边分支内的操作，否则判断从左向右第二个分支的条件是否满足，依此类推。</label>
                    <label>条件类型：</label>
                    <select v-model='TClass' class="form-control">
                        <option value = 0>无条件</option>
                        <option value = 1>当前页面包括文本</option>
                        <option value = 2>当前页面包括元素</option>
                        <option v-if="nowNode['isInLoop']" value = 3>当前循环项包括文本</option>
                        <option v-if="nowNode['isInLoop']" value = 4>当前循环项包括元素</option>
                        <option value = 5>JavaScript命令返回值（需以return 开头）</option>
                        <option value = 6>系统命令返回值</option>
                        <option v-if="nowNode['isInLoop']" value = 7>针对当前循环项的JavaScript命令返回值（需以return 开头）</option>
                      </select>
                    <div v-if='TClass>0 && TClass <5'>
                        <label>包含的文字/元素XPATH： <span style="font-size: 30px!important;" title="相对XPATH写法：以/开头，如循环项XPATH为/html/body/div[1],您的输入为/*[@id='tab-customer'],则最终寻址的xpath为：/html/body/div[1]/*[@id='tab-customer']">☺</span></label>
                        <textarea onkeydown="inputDelete(event)" required placeholder="如果是当前循环包含元素，则输入相对元素的xpath（如/div[2]/div[1]/img，如果写相对路径，需要写成/*//img，即检测当前循环项所有的子孙元素是否存在img标签）。" class="form-control" rows="3" v-model='nowNode["parameters"]["value"]'></textarea>
                    </div>
                    <div v-else-if='TClass > 0 && TClass < 7'>
                        <label>代码/脚本内容： </label>
                        <textarea onkeydown="inputDelete(event)" class="form-control" rows="3" v-model='nowNode["parameters"]["code"]' placeholder="命令返回值大于0或为真则执行此分支内操作，否则不执行。如：return document.body.scrollWidth > 1000 或 python D:/test.py，分别为JS命令和系统命令返回值示例。"></textarea>
                        <label>最长等待脚本执行时间（0代表无限等待）： </label>
                        <input onkeydown="inputDelete(event)" required class="form-control" type="number" v-model.number='nowNode["parameters"]["waitTime"]'></input>
                    </div>
                    <div v-else-if='TClass == 7'>
                        <label>代码/脚本内容（<a href="https://github.com/NaiboWang/EasySpider/wiki/Example-of-JavaScript-instruction-for-the-current-iteration-in-a-conditional-statement" target="_blank">点击此处</a>查看更多示例）： </label>
                        <textarea onkeydown="inputDelete(event)" class="form-control" rows="3" v-model='nowNode["parameters"]["code"]' placeholder="输入针对该循环项的JS命令，该循环项用arguments[0]表示，返回值大于0或为真则执行此分支内操作，否则不执行。如：return arguments[0].innerText.length >=5 即判断当前循环项的文本长度是否大于5，注意要配合循环类型为元素相关（如不固定元素列表）使用。"></textarea>
                        <label>最长等待脚本执行时间（0代表无限等待）： </label>
                        <input onkeydown="inputDelete(event)" required class="form-control" type="number" v-model.number='nowNode["parameters"]["waitTime"]'></input>
                    </div>
                </div>
                <div style="margin-top:5px">
                    <label><b>执行后</b>等待秒数：</label>
                    <input onkeydown="inputDelete(event)" required type="number" class="form-control" v-model.number='list.nl[index.nowNodeIndex]["parameters"]["wait"]'></input>
                </div>
                <button class="btn btn-outline-primary" style="margin-top: 20px;" id="confirm">确定</button>

            </div>


        </div>

    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">保存任务</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <input onkeydown="inputDelete(event)" id="serviceId" type="hidden" name="serviceId" value="-1"></input>
                    <input onkeydown="inputDelete(event)" id="url" type="hidden" name="url" value="about:blank"></input>
                    <label>任务名称：</label>
                    <input onkeydown="inputDelete(event)" required name="serviceName" value="新web采集任务" id="serviceName" class="form-control"></input>
                    <label>任务描述：</label>
                    <textarea onkeydown="inputDelete(event)" id="serviceDescription" name="serviceDescription" class="form-control" rows="3"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" id="saveAsButton" class="btn btn-outline-primary">另存为</button>
                    <button type="button" id="saveButton" class="btn btn-primary">保存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>


</body>
<script src="FlowChart_CN.js"></script>
<script src="logic_CN.js"></script>
<script src="global.js"></script>

<script>
    var navigator = new Vue({
        el: '#navigator',
        data: {
            type: getUrlParam("type"),
            backEndAddressServiceWrapper: getUrlParam("backEndAddressServiceWrapper"),
        },
        methods:{
            gotoHome: function () {
                let url = "";
                if (getUrlParam("lang") == "zh") {
                    url = "taskList.html?lang=zh&type="+getUrlParam("type")+"&wsport="+getUrlParam("wsport")+"&backEndAddressServiceWrapper=" + this.backEndAddressServiceWrapper
                } else {
                    url = "taskList.html?lang=en&type="+getUrlParam("type")+"&wsport="+getUrlParam("wsport")+"&backEndAddressServiceWrapper=" + this.backEndAddressServiceWrapper
                }
                window.location.href = url;
            }, gotoInfo: function () {
                let url = "";
                if (getUrlParam("lang") == "zh") {
                    url = "taskInfo.html?id="+getUrlParam("id")+"&lang=zh&type="+getUrlParam("type")+"&wsport="+getUrlParam("wsport")+"&backEndAddressServiceWrapper=" + this.backEndAddressServiceWrapper
                } else {
                    url = "taskInfo.html?id="+getUrlParam("id")+"&lang=en&type="+getUrlParam("type")+"&wsport="+getUrlParam("wsport")+"&backEndAddressServiceWrapper=" + this.backEndAddressServiceWrapper
                }
                window.location.href = url;
            }
        }
    });

</script>

</html>